<template>
  <div class="user-contail"
       ref="contail">
    <van-nav-bar class="header van-nav-bar_none van-nav-bar_line">
      <span slot="left">我的</span>
      <router-link :to="{path:'/setting'}"
                   slot="right">
        <van-icon class="van-nav-bar__arrow"
                  name="shezhi">
        </van-icon>

      </router-link>
    </van-nav-bar>
    <div class="weaper">
      <div class="info">
        <div class="person">
          <div class="poster"
               @click="goPage('/user/information')">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536923156805&di=1d9d18f65f4f9b73c2094538965a6401&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01460b57e4a6fa0000012e7ed75e83.png">
          </div>
          <div class="message">
            <p class="name"
               @click="goPage('/user/information')"
               v-text="userInfo.ownName || userInfo.username"></p>
            <p class="community"
               @click="goPage('/community')"
               v-text="address"></p>
          </div>
        </div>
      </div>
      <van-row class="fengniao-content links">
        <template v-if="roles===website.rolesType.JL">
          <van-col span="8"
                   @click.native="goPage('/guarantee')">
            <van-icon name="pending-payment" />报修管理
          </van-col>
          <van-col span="8"
                   @click.native="goPage('/complaint')">
            <van-icon name="pending-orders" /> 投诉管理
          </van-col>
          <van-col span="8"
                   @click.native="goPage('/community')">
            <van-icon name="pending-deliver" /> 我的小区
          </van-col>
        </template>
        <template v-else-if="roles===website.rolesType.WX">
          <van-col span="12"
                   @click.native="goPage('/guarantee')">
            <van-icon name="pending-payment" />报修管理
          </van-col>
          <van-col span="12"
                   @click.native="goPage('/community')">
            <van-icon name="pending-deliver" /> 我的小区
          </van-col>
        </template>
        <template v-else-if="roles===website.rolesType.YZ">
          <van-col span="8"
                   @click.native="goPage('/guarantee')">
            <van-icon name="pending-payment" />我的报修
          </van-col>
          <van-col span="8"
                   @click.native="goPage('/complaint')">
            <van-icon name="pending-orders" /> 我的投诉
          </van-col>
          <van-col span="8"
                   @click.native="goPage('/community')">
            <van-icon name="pending-deliver" /> 我的房产
          </van-col>
        </template>
      </van-row>
      <van-cell-group class="fengniao-content">
        <van-cell title="物业管理"
                  v-if="isRoles"
                  is-link
                  @click="goPage('/roles')">
          <van-icon class="left-icon"
                    :style="{backgroundColor:'red'}"
                    name="edit"
                    slot="icon"></van-icon>
        </van-cell>
        <van-cell title="邀请好友"
                  v-if="roles===website.rolesType.YZ"
                  is-link
                  @click="goPage('/invitation')">
          <van-icon class="left-icon"
                    :style="{backgroundColor:'#009688'}"
                    name="qq"
                    slot="icon"></van-icon>
        </van-cell>

      </van-cell-group>
      <van-cell-group v-for="(item,index) in menu"
                      class="fengniao-content"
                      :key="index">
        <van-cell v-for="(citem,cindex) in item"
                  :is-link="!citem.isLink"
                  :title="citem.title"
                  :key="cindex"
                  @click="goLink(citem)">
          <van-icon class="left-icon"
                    :style="{backgroundColor:citem.color}"
                    :name="citem.icon"
                    slot="icon"></van-icon>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import baseCommon from '@/mixins/common';
import { validatenull } from '@/util/validate.js';
import { getUserMenu } from '@/api/user.js';
import { mapGetters } from 'vuex';

export default {
  name: 'user',
  mixins: [baseCommon()],
  data() {
    return {
      menu: [],
    };
  },
  created() {
    this.getUserMenu();
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['userInfo', 'isWuye', 'roles', 'website', 'isRoles', 'address']),
  },
  methods: {
    getUserMenu() {
      getUserMenu().then((res) => {
        const data = res.data.data;
        this.menu = data;
      });
    },
  },
};
</script>

<style lang="scss">
.user-contail {
  .header {
    background-color: #58c474;
    .van-nav-bar__left {
      .van-icon {
        margin-top: 15px;
        font-size: 18px;
      }
    }
    color: #fff;
    i {
      color: #fff;
      span {
        font-size: 14px;
      }
    }
  }
  .info {
    margin-bottom: 5px;
    padding: 15px 20px 30px 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff;
    .person {
      display: flex;
      align-items: center;
      width: 100%;
      color: #333;
    }
    .poster {
      margin-right: 10px;
      width: 60px;
      height: 60px;
      border: 1px solid #fff;
      border-radius: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .message {
      .name {
        margin-bottom: 5px;
        font-size: 18px;
        color: #333;
      }
      .community {
        font-size: 10px;
        color: #999;
      }
    }
  }
  .links {
    padding: 15px 0 10px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-col {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 10%;
        right: 0;
        width: 1px;
        height: 80%;
        background-color: #f0f0f0;
      }
    }
    .van-icon {
      margin-bottom: 8px;
      display: block;
      font-size: 24px;
    }
  }
}
</style>